<template>
    <section class="collect_server_ri">
    	<p>
    		 <el-button style="margin-left: unset;" @click="clickDaochu" class="diy_marage" type="primary" icon="el-icon-upload2">导出</el-button>
	    	  <el-input
	    	  	 class="diy_marage" 
	    	  	style="width: 150px;"
			    placeholder="请输入内容"
			    suffix-icon="el-icon-search"
			    v-model="input21">
			  </el-input>
	    	
	    	 <el-date-picker
	    	 	 class="diy_marage" 
		      v-model="value7"
		      type="daterange"
		      align="right"
		      unlink-panels
		      range-separator="至"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期"
		     >
		    </el-date-picker>
    	</p>
    	
    	
    	<!--table-->
   <el-table
    :data="tableData"
    
    style="width: 100%">
     <el-table-column
     fixed
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      fixed
      prop="name"
      label="服务名称"
      width="150">
    </el-table-column>

 	<el-table-column
 	  align="center"
      v-for="(val,key) in tableLabel"
      :prop="key"
      :label="val"
      width="150">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <p @click="checkBao(scope)">
        	查看报文
        </p>
        <p @click="checkError(scope)">
        	失败条件
        </p>
      </template>
    </el-table-column>
  </el-table>
  
  <p style="margin-top: 15px;">
  	<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
  </p>

  
<el-dialog
  title=""
  :visible.sync="dialogVisibleDaochu"
  width="30%"
  class=""
  >
  <el-form ref="form" :model="form" label-width="100px">
  	<el-form-item label="导出方式">
	    <el-select v-model="form.region" placeholder="请选择">
	      <el-option label="区域一" value="shanghai"></el-option>
	      <el-option label="区域二" value="beijing"></el-option>
	    </el-select>
	</el-form-item>
	
	<el-form-item label="导出文件类型">
	    <el-select v-model="form.region1" placeholder="请选择">
	      <el-option label="区域一" value="shanghai"></el-option>
	      <el-option label="区域二" value="beijing"></el-option>
	    </el-select>
	</el-form-item>
	  <el-form-item>
	    <el-button type="primary">确定</el-button>
	    <el-button>取消</el-button>
	  </el-form-item>
  </el-form>
</el-dialog>
  
<el-dialog
  title="查看报文"
  :visible.sync="dialogVisibleBao"
  width="50%"
  class="diy-dialog"
  >
  <check-bao></check-bao>
</el-dialog>
  
    </section>
</template>

<script>
    import checkBao from "./components/checkBao"
    export default {
    	components:{
    		checkBao
    	},
        data() {
          return {
          			form:{
          				region:'',
          				region1:'',
          			},
          			dialogVisibleDaochu:false,
          			dialogVisibleBao:false,
          			input21:'',
          			value7:'',
          			tableLabel:{
          				name2:'记录标识',
          				name3:'所属网段',
          				name4:'所属区域',
          				name5:'数据来源方式',
          				name6:'数据保存方式',
          				name7:'数据保存目的地',
          				name8:'开始时间',
          				name9:'结束时间',
          				name10:'采集方式',
          				name11:'采集结果',
          				name12:'采集数量(条)',
          				name13:'使用流量'
          			},
          			   tableData: [{
          			   	name:'wwad',
				          name2:'记录标识',
          				name3:'所属网段',
          				name4:'所属区域',
          				name5:'服务方名称',
          				name6:'请求ip地址',
          				name7:'请求时间',
          				name8:'服务时长',
          				name9:'请求条件',
          				name10:'请求结果',
          				name11:'使用的通道',
          				name12:'使用流量',
          				name13:'使用流量'
				        },
          			   {
          			   	name:'wwad',
				          name2:'记录标识',
          				name3:'所属网段',
          				name4:'所属区域',
          				name5:'服务方名称',
          				name6:'请求ip地址',
          				name7:'请求时间',
          				name8:'服务时长',
          				name9:'请求条件',
          				name10:'请求结果',
          				name11:'使用的通道',
          				name12:'使用流量',
          				name13:'使用流量'
				        }]
          };
        },
        methods: {
        	checkBao(scope){
        		console.log(scope);
        		this.dialogVisibleBao =true;
        	},
        	checkError(scope){
        		console.log(scope);
        	},
        	clickDaochu(){
        		this.dialogVisibleDaochu = true;
        	}
        }
  };
</script>

<style scoped="scoped">
	    section.collect_server_ri{
    	    background: #fff;
    		padding: 15px;
    }
    .diy_marage{
    	margin: 0 5px 15px 5px;
    }
    @keyframes dialog-fade-in {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}
</style>